import { Empty } from 'antd';
import { getMetroLineMultipleList } from '@/servers/metro/line';
import MapTianditu from '../line/[id]/components/MapTianditu';
import { getUrlParam } from '@/utils/helper';
import { LineData } from '../line/[id]/components/LineHead';
import { Station } from '../line/[id]/components/StationLine';

function Page() {
  const { t } = useTranslation();
  const { permissions, isPhone } = useCommonStore();
  const { search } = useLocation();
  const lines = getUrlParam(search, 'lines');

  // 权限前缀
  const permissionPrefix = '/metro/map';

  // 权限
  const pagePermission: PagePermission = {
    page: checkPermission(`${permissionPrefix}`, permissions),
  };

  useSingleTab({
    fatherPath: permissionPrefix,
    zhTitle: t('metro.lineMap'),
    enTitle: t('metro.lineMap'),
  });

  const [isFetch, setFetch] = useState(false);
  const [isLoading, setLoading] = useState(false);
  const [linesData, setLinesData] = useState<BaseFormData[]>([]);

  const getPage = useCallback(async () => {
    try {
      setLoading(true);
      const { code, data } = await getMetroLineMultipleList(lines.split('-'));
      if (Number(code) !== 200) return;
      setLinesData(data);
    } finally {
      setFetch(false);
      setLoading(false);
    }
  }, [lines]);

  useEffect(() => {
    if (lines) setFetch(true);
  }, [lines]);

  useEffect(() => {
    if (isFetch) getPage();
  }, [getPage, isFetch]);

  // 首次进入自动加载接口数据
  useEffect(() => {
    if (pagePermission.page) getPage();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [pagePermission.page]);

  return (
    <BaseContent isPermission={pagePermission.page}>
      <div className="overflow-auto w-full">
        {isLoading ? (
          <Empty />
        ) : (
          <MapTianditu
            lines={
              linesData as unknown as {
                line: LineData;
                stations: Station[];
              }[]
            }
            isPhone={isPhone}
            isSingle={false}
          />
        )}
      </div>
    </BaseContent>
  );
}

export default Page;
